<template>
  <div class="MySchedule bg-cf">
    <template v-if="messageList.length">
      <div
        class="schedule-box flex mlr-15 pt-25 pb-15 cp"
        :class="index == cindex ? 'bgf7' : ''"
        @click="changeUser(index)"
        v-for="(item, index) in messageList"
        :key="item.id"
      >
        <!-- "info.un_read ? info.un_read : ''" -->
        <el-badge :value="item.un_read ? item.un_read : ''" type="danger">
          <el-image
            class=""
            round
            style="width: 50px; height: 50px; border-radius: 100%"
            :src="item.avatar"
          />
        </el-badge>
        <div class="right ml-10">
          <p class="mb-10 fz-16">
            <span class="fw-600 c4 mr-10">{{ item.username }}</span>
            <!-- <span style="color: #c10707">尿酸指数异常</span> -->
          </p>
          <div style="width: 200px" class="flex c6">
            <p class="text-hide">
              <!-- <span>[已读]</span> -->
              {{ item.content }}
            </p>
          </div>
        </div>
        <span class="c6 the-time">{{ item.created_at }}</span>
      </div>
    </template>
    <template v-else><el-empty :image-size="200"></el-empty> </template>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { MsgDoctorTalk } from '@/service/api/message'
import { msgItem } from '../types'
// import useHookspagePart from '@/hooks/pagePart'
export default defineComponent({
  name: 'MySchedule',
  setup(props, { emit }) {
    const store = useStore()
    let messageList = ref<msgItem[]>([])
    let pullup = ref(true)
    let cindex = ref(-1)
    const pagePart = reactive({
      page: 1,
      limit: 10
    })
    const resetPage = () => {
      pagePart.page = 1
      pagePart.limit = 5
      pullup.value = true
    }
    /**
     * 数据到底
     */
    const cbAfterAjax = (length: number, total: number) => {
      if (length == total) {
        pullup.value = false
      }
    }
    /**
     * 聊天列表
     */
    const ajaxGetData = (clearOld = false) => {
      if (clearOld) {
        resetPage()
        messageList.value = []
      } else {
        pagePart.page++
      }
      let params = {
        doctor_no: store.state.user.userInfo.doctor_no,
        page: pagePart.page,
        limit: pagePart.limit
      }
      MsgDoctorTalk(params).then((res) => {
        console.log(res)
        if (res.code == 200) {
          messageList.value = [...messageList.value, ...res.data.items]
          cbAfterAjax(messageList.value.length, res.data.total)
        }
      })
    }
    /**
     * 切换用户聊天
     */
    const changeUser = (index: number) => {
      cindex.value = index
      let params = {
        avatar: messageList.value[index].avatar,
        patient_id: messageList.value[index].patient_id,
        username: messageList.value[index].username,
        ua_id: messageList.value[index].ua_id
      }
      store.dispatch('message/getMsg', {
        userid: messageList.value[index].patient_id,
        doctor_no: store.state.user.userInfo.doctor_no
      })
      store.commit('user/setClientInfo', params)
      emit('changeTab')
    }
    onMounted(() => {
      ajaxGetData(true)
    })
    return {
      messageList,
      pullup,
      cindex,
      changeUser
    }
  }
})
</script>
<style lang="less" scoped>
.schedule-box {
  position: relative;
  border-bottom: 1px solid #eee;
  .the-time {
    position: absolute;
    top: 28px;
    right: 15px;
  }
}
.bgf7 {
  background: #f7f9fe !important;
}
</style>
